<template>
  <div class="login-container">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="55px"
      class="login-form"
    >
      <h3 class="login-title">GMQM质量管理系统</h3>
      <el-form-item label="账号" prop="userid">
        <el-input
          v-model="form.userid"
          @keyup.enter.native="keydowond"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="form.password"
          placeholder="请输入密码"
          @keyup.enter.native="keydowond"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import loginApi from '../../api/login'
export default {
  data() {
    return {
      form: {
        userid: "",
        password: "",
      },
      rules: {
        userid: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  created() {},
  methods: {
    keydowond() {
      if (this.form.userid && this.form.password) {
        this.ajax
          .get(`/login/${this.form.userid}/${this.form.password}`, {
            header: {
              "Content-Type": "text/plain",
            },
          })
          .then((res) => {
            // console.log(res.data.Sid)
            if (res.status == 200) {
              var reult = res.data;
              if (reult) {
                sessionStorage.setItem("Cookie", JSON.stringify(reult.Sid));
                sessionStorage.setItem("userinfo", JSON.stringify(reult));
                this.$message({
                  message: "登录成功",
                  type: "success",
                });
                this.$router.push("/Home");
              }
            }
          })
          .catch((err) => {
            var errdata = err.response.data;
            if (err.response.status == 601) {
              this.$alert(errdata.DESC, {
                confirmButtonText: "确定",
                callback: (action) => {
                  this.$message({
                    type: "info",
                    message: `action: ${action}`,
                  });
                },
              });
            }
          });
      }
    },

    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ajax
            .get(`/login/${this.form.userid}/${this.form.password}`, {
              header: {
                "Content-Type": "text/plain",
              },
            })
            .then((res) => {
              if (res.status == 200) {
                var reult = res.data;
                if (reult) {
                  sessionStorage.setItem("Cookie", JSON.stringify(reult.Sid));
                  sessionStorage.setItem("userinfo", JSON.stringify(reult));
                  this.$message({
                    message: "登录成功",
                    type: "success",
                  });
                  this.$router.push("/Home");
                }
              }
            })
            .catch((err) => {
              var errdata = err.response.data;
              if (err.response.status == 601) {
                this.$alert(errdata.DESC, {
                  confirmButtonText: "确定",
                  callback: (action) => {
                    this.$message({
                      type: "info",
                      message: `action: ${action}`,
                    });
                  },
                });
              }
            });
          //调用登录接口
          //   loginApi.login(this.form.username, this.form.password).then(response => {
          //   const resp = response.data;

          //   console.log(resp.data.token);

          //   if(resp.flag){
          //     // 通过token,在加上调用用户信息接口获取数据
          //     loginApi.getInfo(resp.data.token).then(response=>{
          //       const respUser = response.data;
          //       console.log(respUser.data)
          //       if(respUser.flag){

          //           localStorage.setItem("adminInfo",JSON.stringify(respUser.data))

          //           localStorage.setItem("adminToken",resp.data.token)

          //           this.$router.push("hader");
          //       }else{
          //         this.$message({
          //           duration : 1 * 1000,
          //           showClose: true,
          //           message: resp.message,
          //           type: 'warning'
          //         });
          //   }
          // })
          //   }else{
          //     this.$message({
          //       duration : 1 * 1000,
          //       showClose: true,
          //       message: resp.message,
          //       type: 'warning'
          //     });
          //     return false;
          //   }
          // })
        } else {
          console.log("error submit");
          return false;
        }
      });
    },
  },
};
</script>

<style >
.login-form {
  width: 410px;
  background: rgba(255, 255, 255, 0.8);
  padding: 40px;
  margin: 160px auto;
  border-radius: 15px;
}
.login-title {
  text-align: center;
  color: #303133;
  margin-bottom: 10%;
  /* line-height:10px; */
}
.login-container {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("../../assets/bg_5.jpg");
  background-size: 100%;
  /* background:no-repeat; */
  /* overflow: hidden; */
}

@media screen and (min-width: 1920px) {
  .login-form {
    margin: 220px auto;
  }
}
</style>